import React, { lazy } from 'react';
import { BookOutlined, ExperimentOutlined } from '@ant-design/icons';
import { createThreePage } from '@/components';

/**
 * 统一的路由和菜单配置文件
 * 
 * 使用说明：
 * 1. 添加新路由：只需在 routeGroups 数组中添加新的配置对象
 * 2. 添加新分组：在 groupConfigs 数组中添加新的分组配置
 * 3. 页面组件会自动根据路径创建，只需确保对应的 three.ts 文件存在并导出 init 函数
 * 4. 路由和菜单会自动生成，无需手动维护多个文件
 */

// 占位符组件
const PlaceholderComponent: React.FC<{ title: string }> = ({ title }) => (
  <div style={{ 
    width: '100%', 
    height: '100vh', 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center',
    fontSize: '24px',
    color: '#666'
  }}>
    {title} - 敬请期待
  </div>
);

// 统一的路由配置
export interface RouteConfig {
  key: string;
  label: string;
  path: string;
  component: React.ComponentType<any>;
}

export interface RouteGroup {
  key: string;
  icon: React.ReactNode;
  label: string;
  routes: RouteConfig[];
}

// 路由分组配置
export const routeGroups: RouteGroup[] = [
  {
    key: 'basics',
    icon: <BookOutlined />,
    label: '基础语法',
    routes: [
      {
        key: 'first-scene',
        label: '第一个3D场景',
        path: '/first-scene',
        component: createThreePage('first-scene')
      },
      {
        key: 'lil-gui',
        label: 'gui可视化联调',
        path: '/lil-gui',
        component: lazy(() => import('@/pages/data-gui'))
      },
      {
        key: 'perspective-camera',
        label: '透视相机与视椎体',
        path: '/perspective-camera',
        component: createThreePage('perspective-camera')
      },
      {
        key: 'vertex-geometry',
        label: '顶点几何体',
        path: '/vertex-geometry',
        component: () => <PlaceholderComponent title="顶点几何体案例" />
      },
      {
        key: 'point-line-model',
        label: '点线网格模型',
        path: '/point-line-model',
        component: () => <PlaceholderComponent title="点线网格模型案例" />
      }
    ]
  },
  {
    key: 'projects',
    icon: <ExperimentOutlined />,
    label: '实战项目',
    routes: [
      {
        key: 'random-mountain',
        label: '随机山脉',
        path: '/random-mountain',
        component: () => <PlaceholderComponent title="随机山脉案例" />
      }
    ]
  }
];

// 自动生成菜单项
export const menuItems = routeGroups.map(group => ({
  key: group.key,
  icon: group.icon,
  label: group.label,
  children: group.routes.map(route => ({
    key: route.key,
    label: route.label,
    path: route.path
  }))
}));

// 扁平化所有路由配置
export const routeConfigs = routeGroups.flatMap(group => group.routes);

// 扁平化菜单项
export const flatMenuItems = routeConfigs.map(route => ({
  key: route.key,
  label: route.label,
  path: route.path
}));

// 默认路由
export const defaultRoute = routeConfigs[0]; 